<link rel="stylesheet" href="{{URL::asset('./css/activity/pay.css')}}">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<meta name="_token" content="{{csrf_token()}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/public.css')}}">

<!-- home.activity.actPay -->
<div class="main" id="actpay"  v-cloak>
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
        </a>
        <div class='rightStep'>
            <div class="completed-step"><a>支付金额</a></div>
            <div class="completed-step"><a>支付完成</a></div>
        </div>
    </div>
    <div class="paying">
        <img src="{{URL::asset('./img/icon/paying.png')}}" alt="">
        <span>活动报名</span>
        <p>
            <span>
                主办方：@{{payDataAct.sponsor}}
            </span>
            <span>
                <a>
                    @{{payData.price}}
                </a>
                元
            </span>
        </p>
    </div>
    <div class="applymes">
        <span>报名信息</span>
        <table>
            <thead>
                <tr>
                    <th>
                        订单编号
                    </th>
                    <th>
                        活动名称
                    </th>

                    <th>
                        单价
                    </th>
                    <th>
                        参会人数
                    </th>
                    <th>
                        金额总价
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@{{payData.pay_sn}}</td>
                    <td>@{{payDataAct.title}}</td>
                    <td>￥ @{{payData.price}}</td>
                    <td> @{{payData.number}}人</td>
                    <td>￥ @{{payData.money}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="paymes">
        <span>支付信息</span>
        <div>
            <!-- <div :class="{active:checkNum==1}">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" v-if="checkNum==1" alt="">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" v-else alt="">
                <img src="{{URL::asset('./img/icon/zhifubao.png')}}" alt="">
            </div> -->
            <div :class="{active:checkNum==2}">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" v-if="checkNum==2" alt="">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" v-else alt="">
                <img src="{{URL::asset('./img/icon/weixin.png')}}" alt="">

            </div>
        </div>
    </div>
    <button @click="payAfter">
        确认支付
    </button>


    <el-dialog :visible.sync="paying" width="400px" class="payOrderDialog" :close-on-press-escape="false" :close-on-click-modal="false">
        <span class="payOrderDialog_span">￥@{{payData.money}}</span>
        <div class="payOrderDialog_code">
            <div id="qrcode"></div>
            <span class="payOrderDialog_code_span">微信扫一扫，立即支付</span>
        </div>
    </el-dialog>
</div>
<style>
    .el-dialog__header {
        display: none;
    }

    #qrcode {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/qrcode.min.js') }}" type="text/javascript"></script>
<script>
    $(() => {
        let app = new Vue({
            el: '#actpay',
            data: () => {
                return {
                    headerLogo: '',
                    checkNum: 2,
                    payId: getQueryString("id"),
                    payData: {},
                    payDataAct: {},
                    paying: false,
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
                let data = {
                    sign_up_id: this.payId,
                }
                apiAjax("{{ route('home.activity.actPayDataApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.payData = res.data;
                        this.payDataAct = res.data.activity;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });

                    }
                }, (erro) => {

                });
            },
            mounted() {

            },
            methods: {
                payAfter() {
                    $('#qrcode').html("");
                    let data = {
                        pay_order: this.payData.pay_sn,
                    }
                    apiAjax("{{ route('home.activity.actCompleteOrder')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.paying = true;
                            this.$nextTick(() => {
                                var qrcode = new QRCode("qrcode", {
                                    text: res.data,
                                    width: 248,
                                    height: 248,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                                this.timePay();
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                timePay() {
                    let pay = setInterval(() => {
                        let data = {
                            sign_up_id: this.payId,
                        }
                        apiAjax("{{ route('home.activity.actPayDataApi')}}", 'get', data, (res) => {
                            if (res.code == 0) {
                                if (res.data.pay_state == 2) {
                                    this.$message({
                                        message: "支付成功",
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.activity.actPayAfter') }}?id="+res.data.id
                                    clearTimeout(pay);
                                }
                            } else {}
                        }, (erro) => {

                        });
                    }, 3000);
                }
            }
        })
    })
</script>